<template>
  <div class="listWapper">
    <customDetailsTopbar title="消防生产投入" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <!--      <div class="d-flex w-100">-->
      <!--        <custom-radio-tag1 class="mb-1 w-100" :list="tagList" :value="radioValue" is-scroll @change="tagChange" />-->
      <!--      </div>-->
      <customSearch ref="customSearch" placeholder="请输入企业名称" :title="title" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList && tableList.length>0" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul class="des-list">
                <li v-for="des,ind in desList" :key="des.value" class="des">
                  <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">{{ item[des.value] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <custom-timer v-if="checkedTag === '消防生产投入计划'" type="year" title="所属年份" :is-interval="false" :picker-title="'请选择所属年份'" :date-value="form.years" @update:dateValue="getTime" />
          <customPopCheckbox
            v-if="checkedTag === '消防生产投入计划'"
            :radio-list="amountCompleRateFlagArr"
            :is-multiple="false"
            :radio-value.sync="form.amountCompleRateFlag"
            title="实际支出占计提金额比例"
          />
          <custom-timer v-if="checkedTag === '消防费用使用台账'" :start="form.startTime" :end="form.endTime" title="检查时间" @update:start="getStart" @update:end="getEnd" />
          <customPopCheckbox v-if="checkedTag === '消防费用使用台账'" title="投入类型" :check-value.sync="form.costType" :list="selectOptionAll['安全生产投入-费用使用台账投入类型']" />
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { productPlanList, getCostLedgerList } from '@/api/fireFighting'
export default {
  mixins: [commonList],
  data() {
    return {
      current: '',
      title: '投入计划列表',
      total: 0,
      pages: 1,
      form: {
        years: new Date().getFullYear() + '',
        startTime: '',
        endTime: '',
        companyName: '',
        amountCompleRateFlag: '',
        costType: '',
        pageNum: 1,
        pageSize: 10
      },
      amountCompleRateFlagArr: [
        { label: '≥100%', value: 1 },
        { label: '80%-100%(含80%)', value: 2 },
        { label: '60%-80%(含60%)', value: 3 },
        { label: '<60%', value: 4 }
      ],
      tagList: [
        { label: '消防生产投入计划', value: '消防生产投入计划' },
        { label: '消防费用使用台账', value: '消防费用使用台账' }
      ],
      checkedTag: '消防生产投入计划',
      desListMap: {
        '消防生产投入计划': [
          { label: '所属年份', value: 'years', icon: '&#xe61b;' },
          { label: '上报时间', value: 'reportTime', icon: '&#xe685;' },
          { label: '上年度生产收入（万元）', value: 'lastIncome', icon: '&#xe69a;' },
          { label: '本年度计提金额（万元）', value: 'currentAmount', icon: '&#xe69a;' },
          { label: '实际支出占计提金额比例（%）', value: 'amountCompleRate', icon: '&#xe64d;' }
        ],
        '消防费用使用台账': [
          { label: '所属年份', value: 'years', icon: '&#xe61b;' },
          { label: '支出金额（元）', value: 'payAmount', icon: '&#xe69a;' },
          { label: '上报时间', value: 'reportTime', icon: '&#xe685;' }
        ]
      },
      desList: [],
      tableList: [],
      radioValue: 0
    }
  },
  mounted() {
    const { current, checkedTag } = this.$route.query
    this.current = current || ''
    this.checkedTag = checkedTag || '消防生产投入计划'
    this.radioValue = this.checkedTag === '消防生产投入计划' ? 0 : 1
    this.title = this.checkedTag === '消防生产投入计划' ? '投入计划列表' : '费用使用台账'
    this.desList = this.desListMap[this.checkedTag]
    this.getList()
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取列表
    async getList() {
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const api = {
        '消防生产投入计划': productPlanList,
        '消防费用使用台账': getCostLedgerList
      }
      const param = {
        '消防生产投入计划': {
          years: this.form.years,
          companyName: this.form.companyName,
          amountCompleRateFlag: this.form.amountCompleRateFlag,
          pageNum: this.form.pageNum,
          companyIds: -1,
          pageSize: this.form.pageSize
        },
        '消防费用使用台账': {
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          companyName: this.form.companyName,
          pageNum: this.form.pageNum,
          companyId: -1,
          costType: this.form.costType,
          pageSize: this.form.pageSize
        }
      }
      const { status, data } = await api[this.checkedTag](param[this.checkedTag])
      if (status === 0 && data) {
        this.tableList = this.tableList.concat(data.list)
        this.total = data.total
        this.pages = data.pages
        this.$refs.customLoadmore.loadStatus = false
        // this.layout.hideLoading()
      }
    },
    goDetail(item) {
      this.$router.push({
        path: '/staging/productionInputDetail',
        query: { tag: this.checkedTag, current: this.current, ...item }
      })
    },
    tagChange(val) {
      this.checkedTag = val.item.value
      this.desList = this.desListMap[this.checkedTag]
      this.title = this.checkedTag === '消防生产投入计划' ? '投入计划列表' : '费用使用台账'
      this.resetSuperSearch()
      this.handleSuperSearch()
    },
    handleSearch(val) {
      this.tableList = []
      this.form.pageNum = 1
      this.form.companyName = val
      this.getList()
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    resetSuperSearch() {
      this.form.pageNum = 1
      this.form.years = new Date().getFullYear() + ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.costType = ''
      this.form.companyName = ''
      this.form.amountCompleRateFlag = ''
      this.$refs.customSearch.restore()
      // this.superSearch = false
      // this.tableList = []
      // this.getList()
    },
    handleSuperSearch() {
      this.form.pageNum = 1
      this.superSearch = false
      this.tableList = []
      this.getList()
    },
    getTime(val) {
      this.form.years = val
    },
    getStart(val) {
      this.form.startTime = val
    },
    getEnd(val) {
      this.form.endTime = val
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
